<template>
  <div class="picture">
    <div class="picture_div">
      <p class="picture_tit">图片</p>
      <!-- 图片工具-按钮 -->
      <div class="picture_buttons">
        <div
          v-for="(v, i) in picture_list1"
          :key="i"
          @click="picturelist1Click($event, v.tit)"
          class="picture_button clickdiv"
        >
          <img :src="v.img" alt="" />
          <span>{{ v.tit }}</span>
          <input
            :type="i == 2 ? 'file' : 'button'"
            v-if="i == 2 ? true : false"
            @change="picturelist1Change($event, v.tit)"
          />
        </div>
      </div>
      <!-- 图片工具-层级关系 -->
      <!-- <div class="picture_layers">
        <div class="">
          <div
            class="picture_layer"
            v-for="(v, i) in listImg"
            :key="i"
            :style="{
              background: v.config.name == imgtool.name ? ' #e9e9e9' : '#fff',
            }"
            @click="picturelayerclick(v.config.name)"
          >
            {{ v.config.picname }}
          </div>
        </div>
      </div> -->
    </div>
    <div class="picture_div1">
      <div class="picture_range">
        <p class="picture_range_tit">色阶</p>
        <div class="">{{ rangebrightnessV + "%" }}</div>
      </div>
      <input
        type="range"
        min="-1"
        max="1"
        step="0.01"
        @input="rangeInputbrightness()"
        :style="{ backgroundSize: rangebrightnessCSS }"
        v-model.number="imgtool.brightness"
        @mousedown="rangeInputdragstart"
        @mouseup="rangeInputdragend"
      />
      <div class="picture_range">
        <p class="picture_range_tit">不透明度</p>
        <div class="">{{ rangeV + "%" }}</div>
      </div>
      <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        @input="rangeInputtransparency()"
        :style="{ backgroundSize: rangeCSS }"
        v-model.number="imgtool.opacity"
        @mousedown="rangeInputdragstart"
        @mouseup="rangeInputdragend"
      />
      <div class="picture_tool">
        <div
          class="picture_tools"
          v-for="(v, i) in pictureTool"
          :key="i"
          :style="{ background: v.select ? ' #d4d4d4' : '#fff' }"
          @click="picturetoolsClick(i)"
        >
          <el-tooltip
            class="item"
            popper-class="tooltip"
            effect="dark"
            :content="v.text"
            placement="bottom"
          >
            <img :src="v.img" alt="" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from "@/utils/mixin";
import { mapState } from "vuex";
// import { imagematting } from "@/api/imagematting";
export default {
  mixins: [mixin],
  data() {
    return {
      //锁&删除
      pictureTool: [
        { img: require("@/assets/img/key.png"), select: false, text: "上锁" },
        { img: require("@/assets/img/del.png"), select: false, text: "删除" },
      ],
      //按钮-列表1
      picture_list1: [
        {
          tit: "复制图片",
          img: require("@/assets/img/新建1.png"),
        },
        {
          tit: "一键抠图",
          img: require("@/assets/img/koutu.png"),
        },
        {
          tit: "替换图片",
          img: require("@/assets/img/tihuan.png"),
        },
        {
          tit: "局部提亮",
          img: require("@/assets/img/局部涂亮.png"),
        },
        {
          tit: "裁剪/蒙版",
          img: require("@/assets/img/caijian.png"),
        },
        {
          tit: "灰度显示/复原",
          img: require("@/assets/img/huidu.png"),
        },
        {
          tit: "置于底层/顶层",
          img: require("@/assets/img/zhidi.png"),
        },
      ],
      //滑动条-透明度
      rangeCSS: "",
      rangeV: "",
      //滑动条-明度
      rangebrightnessCSS: "",
      rangebrightnessV: "",
      source: null,
    };
  },
  computed: {
    ...mapState("templateStage", [
      "modifyele",
      "ellipsetool",
      "listNote",
      "listImg",
      "listEllipse",
      "imgtool",
      "historylist",
    ]),
    ...mapState("popupmanage", ["loadingbtn"]),
  },
  watch: {
    "$store.state.popupmanage.loadingbtn"() {
      //对数据进行操作
      if (typeof this.source === "function") {
        this.source("终止请求");
      }
    },
  },
  methods: {
    //替换图片
    picturelist1Change(e, tit) {
      if (tit == "替换图片") {
        if (this.historylist.length == 0) e.stopPropagation();
        const file = e.target.files[0];
        let res = this.$datatools.compressedImage(file);
        res.then((result) => {
          if (this.historylist.length == 0) this.$emit("deductchild");
          this.$store.commit("templateStage/REPLACEIMG", result);
          this.$emit("loadele", this.modifyele);
          setTimeout(() => {
            this.$emit("deductchild");
          }, 200);
        });
      }
    },
    async picturelist1Click(e, tit) {
      if (tit == "复制图片") {
        //复制图片
        this.$emit("copy");
      } else if (tit == "一键抠图") {
        //一键抠图
        let imgsrc;
        let that = this;
        this.listImg.forEach((v) => {
          if (v.config.name == this.modifyele) {
            imgsrc = v.config.image.currentSrc;
          }
        });
        const formData = new FormData();
        formData.append("api_key", "TctBCZizXgxOei02Nh09l_AoiEq0zF9I");
        formData.append("api_secret", "Fzz4_hgtwJGG3p6QZHpN0VGmBVboZ8Y4");
        if (imgsrc.indexOf("data:") != -1 && imgsrc.indexOf("base64") != -1) {
          formData.append("image_base64", imgsrc);
        } else {
          formData.append("image_url", imgsrc);
        }
        that.$emit("maskchild", true);
        that.$axios
          .post(
            "https://api-cn.faceplusplus.com/humanbodypp/v2/segment",
            formData,
            {
              headers: {
                "Content-Type": "multipart/form-data",
              },
              cancelToken: new this.$axios.CancelToken(function executor(c) {
                that.source = c;
              }),
            }
          )
          .then(
            (res) => {
              that.$emit("maskchild", false);
              if (res.status == 200) {
                if (this.historylist.length == 0) this.$emit("deductchild");
                let data = `data:image/png;base64,${res.data.body_image}`;
                that.$store.commit("templateStage/MATIMG", data);
                that.$emit("loadele", that.modifyele);
                setTimeout(() => {
                  this.$emit("deductchild");
                }, 200);
              }
            },
            (err) => {
              that.$emit("maskchild", false);
              if (err == "ERR_NETWORK") {
                alert("网络错误,请重新尝试");
              }
            }
          )
          .catch((err) => {
            if (this.$axios.isCancel(err)) {
              //console.log("Rquest canceled 请求取消", err.message); //请求如果被取消，这里是返回取消的message
            } else {
              //console.log(err);
            }
          });
      } else if (tit == "裁剪/蒙版") {
        this.$emit("cropele", this.modifyele);
      } else if (tit == "灰度显示/复原") {
        //灰度显示
        if (this.historylist.length == 0) this.$emit("deductchild");
        this.$store.commit("templateStage/GRAYIMG");
        this.$emit("loadele", this.modifyele);
        this.$emit("deductchild");
      } else if (tit == "置于底层/顶层") {
        if (this.historylist.length == 0) this.$emit("deductchild");
        //置于底层/顶层
        this.$store.commit("templateStage/ZINDEXIMIMG");
        this.$emit("deductchild");
        //更新变换器
        this.$emit("update", this.modifyele);
      } else if (tit == "局部提亮") this.$emit("illuminate", this.modifyele);
    },
    //滑动条-修改透明度
    rangeInputtransparency() {
      // if (this.historylist.length == 0) this.$emit("deductchild");
      let { opacity } = this.imgtool;
      opacity = opacity * 100;
      this.rangeCSS = opacity + "% 100%";
      this.rangeV = parseInt(opacity);
      // this.$emit("deductchild");
    },
    rangeInputdragstart() {
      if (this.historylist.length == 0) this.$emit("deductchild");
    },
    rangeInputdragend() {
      this.$emit("deductchild");
    },
    //滑动条-修改亮度
    rangeInputbrightness() {
      let { brightness } = this.imgtool;
      brightness = brightness * 100;
      let color;
      if (brightness > 0) color = 50 - brightness * 0.5 * -1;
      else color = brightness * 0.5 + 50;
      this.rangebrightnessCSS = color + "% 100%";
      this.rangebrightnessV = parseInt(brightness);
    },
    //上锁与删除
    picturetoolsClick(i) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      let { select } = this.pictureTool[i];
      this.pictureTool[i].select = !select;
      if (i == 0) {
        if (this.pictureTool[i].select) {
          this.$emit("nonechild");
          this.$store.commit("templateStage/ADDKEYELE", this.modifyele);
          this.$emit("loadele", this.modifyele);
          this.$emit("addtrans", this.modifyele);
          //上锁时，低于背景图层 false
          this.$emit("glassylayercancel", this.modifyele);
        } else {
          //开锁时，低于背景图层为true
          this.$store.commit("templateStage/DELKEYELE", this.modifyele);
          this.$emit("addtrans", this.modifyele);
          this.$emit("loadele", this.modifyele);
        }
      } else if (i == 1) {
        if (this.pictureTool[i].select) {
          this.listImg.forEach((v, index) => {
            if (v.config.name == this.modifyele) {
              this.$store.commit("templateStage/DELLISTIMG", index);
              this.$emit("delchild", false);
            }
          });
        }
      }
      this.$emit("deductchild");
    },
    //进入页面判断元素是否是被锁住的
    draggabletool() {
      if (this.imgtool.draggable == false) this.pictureTool[0].select = true;
      else this.pictureTool[0].select = false;
    },
  },
  created() {
    this.rangeInputtransparency();
    this.rangeInputbrightness();
    this.draggabletool();
  },
  beforeUpdate() {
    this.rangeInputtransparency();
    this.rangeInputbrightness();
    this.draggabletool();
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.clickdiv {
  &:active {
    background: #dad9d9;
  }
}
.picture_range_tit {
  font-size: 14px;
}
.picture {
  .holistic();
  .pictureall();
  .picture_button {
    position: relative;
    input {
      position: absolute;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      opacity: 0 !important;
      z-index: 999;
    }
  }
  .picture_button:nth-of-type(7) {
    margin-bottom: 22px !important;
  }
  .picture_tools {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    .cen();
  }
  .picture_layers {
    width: 100%;
    height: 118px;
    border-radius: 6px;
    // overflow: hidden;
    border: 1px solid #e9eee9;
    margin-top: 18px;
    padding-right: 3px;
    & > div {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      .picture_layer {
        width: 96%;
        height: 28px;
        padding-left: 13px;
        border-bottom: 1px solid #e9eee9;
        cursor: pointer;
        .divDA();
      }
      .picture_layer:last-child {
        border-bottom: 1px solid transparent;
      }
    }
  }
}
</style>